<template>
  <div class="my page" v-if="userInfo">
    <div class="top-div">
      <van-nav-bar class="top-title" title="个人中心" />
      <!-- 个人信息 -->
      <div class="top-hd" v-if="isShowUserInfo">
        <!-- <div class="avatar-url">
          <img src="/static/img/20200907170732.jpg" />
        </div> -->
        <div class="user-info">
          <div class="account">{{userInfo.nickname | phoneFilter}}</div>
          <!-- <span class="level-name">{{userInfo.level_name}}</span> -->
          <!-- <span class="real-name" @click="goCert">{{isCert?'您未完成实名认证':'查看实名信息'}}></span> -->
        </div>
      </div>
      <div class="withdrawal" @click="goRouter('details/bonus')">
        <div class="text">累计权益<span>明细</span></div>
        <div class="amount">{{userInfo.totalBonus | toDecimalByCutoffWithoutOmit}}</div>
      </div>
      <div class="rows-flex">
        <div class="stright"></div>
        <div class="rows" @click="goRouter('withdrawal/form')">
          <div class="size-text">深秘豆</div>
          <div class="amount">{{userInfo.balance | toDecimalByCutoffWithoutOmit}}</div>
        </div>
        <div class="rows" @click="goRouter('details/water',{type:1})">
          <div class="size-text">账户权益</div>
          <div class="amount">{{userInfo.balance}}</div>
        </div>
      </div>
    </div>
    <div class="wrapper" ref="webview">
      <div class="earnings-statistical">
        <div class="earnings">
          <div class="earnings-btn bg-1" @click="goRouter('topup')">
            <div class="text">充值</div>
          </div>
          <div class="earnings-btn bg-2">
            <div class="text">待结算</div>
          </div>
          <div class="earnings-btn bg-3">
            <div class="text">结算</div>
          </div>
        </div>
      </div>
      <!-- <div class="menu-list">
          <div class="header">
            <div class="title">订单</div>
          </div>
          <div class="menu-group">
            <div class="cell" @click="goRouter('order/mall')">
              <img class="icon" src="/static/img/icon-menu-4.png" />
              <div class="title">商城订单</div>
            </div>
          </div>
      </div> -->
      <div class="menu-group">
        <div class="cell" @click="goErcode">
          <img class="icon" src="/static/img/mine/icon7.png" />
          <div class="title">邀请码</div>
        </div>
        <div class="cell" @click="goRouter('reg/points/transfer')">
          <img class="icon" src="/static/img/mine/icon6.png" />
          <div class="title">转账</div>
        </div>
        <div class="cell" @click="goRouter('details/bonus')">
          <img class="icon" src="/static/img/mine/icon8.png" />
          <div class="title">购买明细</div>
        </div>
        <div class="cell" @click="goRouter('account/setup')">
          <img class="icon" src="/static/img/mine/icon1.png" />
          <div class="title">账户信息</div>
        </div>
        <div class="cell" @click="goRouter('my/team')">
          <img class="icon" src="/static/img/mine/icon2.png" />
          <div class="title">我的团队</div>
        </div>
        <div class="cell" @click="goRouter('declaration')">
          <img class="icon" src="/static/img/mine/icon5.png" />
          <div class="title">运营中心</div>
        </div>
        <div class="cell" @click="goRouter('order/mall')">
          <img class="icon" src="/static/img/mine/icon3.png" />
          <div class="title">商城订单</div>
        </div>
        <div class="cell" @click="goRouter('address/list')">
          <img class="icon" src="/static/img/mine/icon4.png" />
          <div class="title">地址管理</div>
        </div>
      </div>
    </div>
    <tab-bar v-model="isActive"></tab-bar>
    <er-code v-model="isErCode" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'My',
  data () {
    return {
      isActive: 4,
      isPopup: true,
      imgUrl: '',
      isErCode: false,
      isSwitch_1: false,
      isSwitch_2: false,
      isShowUserInfo: true
    };
  },
  computed: {
    ...mapGetters(['userInfo', 'isCert'])
  },
  created () {
    this.isSwitch_1 = !this.userInfo.isNeedRepeat;
    this.isSwitch_2 = !this.userInfo.isNeedRepeat;
    this.$store.dispatch('setUserInfo');
  },
  methods: {
    goCert () {
      this.$router.push({ path: '/authentication', query: { type: this.isCert ? 1 : 2 } });
    },
    // 二维码
    goErcode () {
      this.isErCode = true;
    },
    goRouter (path, query) {
      var routerQuery = { ...query };
      if (path === 'order/mall') {
        routerQuery = { isFromRoute: true };
      }
      if (path === 'declaration') {
        if (!this.userInfo.status) {
          return this.$toast('请先激活账号，请先购买产品激活账号。');
        }
        if (this.userInfo.scrStatus === -1 || this.userInfo.scrStatus === 1) {
          routerQuery = { type: !this.userInfo.is_service ? 1 : 2 };
        } else if (this.userInfo.scrStatus === 0 || this.userInfo.scrStatus === 2) {
          path = 'prompt';
          routerQuery = { type: this.userInfo.scrStatus === 0 ? 4 : 5 };
        }
      }
      this.$router.push({ path: '/' + path, query: routerQuery });
    }
  }
};
</script>
<style lang="less" scoped>
body{
  background: #fff;
}
.my {
  display: flex;
  flex-direction: column;
  .wrapper {
    flex: 1;
    overflow: auto;
  }
  .top-div{
    overflow: hidden;
    background: url('/static/img/mine/top_back.png');
    background-size:100% 100%;
    .top-title{
      background: transparent!important;
    }
    .withdrawal {
      height: 180px;
      border-radius: 10px;
      margin: 20px 15px 0 15px;
      position: relative;
      padding: 0 30px 32px;
      color: #fff;
      .text {
        height:40px;
        line-height: 40px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        color:#fff;
        font-size: 30px;
        margin-bottom: 20px;
        span {
          margin-left:10px;
          padding:3px 20px;
          border-radius: 5px;
          background: rgba(255, 255, 255, 0.2);
          font-size: 25px;
        }
      }
      .amount {
        font-size: 70px;
        text-align: center;
        color:#fff;
      }
      .btn {
        position: absolute;
        top: 60px;
        right: 0;
        font-size: 28px;
        border-top-left-radius: 68px;
        border-bottom-left-radius: 68px;
        background: linear-gradient(80deg, #2087fe 0%, #5049e4 100%);
        height: 68px;
        padding: 14px 48px 14px 48px;
        color: #fff;
        // &::before {
        //   content: '';
        //   display: block;
        //   width: 40px;
        //   height: 40px;
        //   background-image: url('/static/img/icon-withdrawal.png');
        //   background-position: 0 0;
        //   background-repeat: no-repeat;
        //   background-size: contain;
        //   position: absolute;
        //   left: 32px;
        //   top: 12px;
        // }
      }
    }
    .rows-flex {
      background:rgba(255,255,255,0.2);
      position: relative;
      display: flex;
      flex-wrap: nowrap;
      height:1.5rem;
      width:100%;
      .stright{
        width:2px;
        height:80%;
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
        background: #fff;
      }
      .rows {
        width: 50%;
        display: flex;
        height:100%;
        align-content: center;
        flex-wrap: wrap;
        .icon {
          width: 76px;
          height: 76px;
          margin-right: 10px;
          img {
            width: 76px;
            height: 76px;
          }
        }
        .size-text {
          font-size: 24px;
          color: #d9d9d9;
          width:100%;
          text-align: center;
          margin-bottom: 10px;
        }
        .amount {
          text-align: center;
          width:100%;
          font-size: 32px;
          color: #ffffff;
          line-height: 32px;
          position: relative;
          font-weight: bold;
        }
        .text {
          color: #545454;
        }
        .c1 {
          color: #7c67ff;
        }
      }
    }
  }
  .top-hd {
    box-sizing: border-box;
    padding: 10px 40px 10px;
    display: flex;
    .avatar-url {
      width: 136px;
      height: 136px;
      margin-right: 32px;
      background-color: #e4ecf2;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 136px;
        height: 136px;
        border-radius: 50%;
        object-fit: contain;
      }
    }
    .user-info {
      flex: 1;
      .account {
        display: block;
        font-size: 30px;
        color: #fff;
        font-weight: bold;
        margin: 10px 0;
        text-align: center;
      }
      .real-name {
        font-size: 24px;
        color: #333;
        vertical-align: middle;
        line-height: 20px;
        padding-left: 5px;
      }
      .level-name {
        // float: right;
        background-color: #2087fe;
        color: #fff;
        padding: 5px 10px;
        // font-weight: 700;
        border-radius: 5px;
        opacity: 0.8;
      }
      .buy-add {
        height: 60px;
        padding: 10px 55px 10px 32px;
        background: linear-gradient(0deg, rgba(239, 236, 255, 1) 0%, rgba(203, 195, 255, 1) 100%);
        color: #7c67ff;
        font-size: 28px;
        border-radius: 8px;
        position: relative;
      }
    }
  }
  .menu-list {
    background-color: #fff;
    margin-top: 10px;
    .header {
      padding: 10px 15px;
      border-bottom: 1px solid #eeeeee;
      .title {
        margin: 15px;
        padding-left: 15px;
        border-left: 5px solid #ff0000;
        font-weight: 700;
      }
    }
  }
  .menu-group {
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    padding: 30px;
    padding-bottom: 1.3rem;
    .cell {
      width: 100%;
      border-bottom:1px solid #eaeaea;
      text-align: center;
      padding: 20px 0 20px;
      display:flex;
      align-items:center;
      position: relative;
      &::after {
        content: '';
        display: inline-block;
        width: 0.2rem;
        height: 0.3rem;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(-50%,-50%);
        background-image: url('/static/img/mine/icon-arrow-right.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .icon {
        width: 60px;
        margin-right: 20px;
      }
      .title {
        color: #000;
        font-size: 28px;
      }
    }
  }
  .earnings-statistical {
    background-color: #fff;
    padding: 30px 30px 0;
    .earnings {
      display: flex;
      justify-content: space-between;
      .bg-1 {
        background-color: #FFD000;
      }
      .bg-2 {
        background-color: #00B4FF;
      }
      .bg-3 {
        background-color: #FF5100;
      }
      .earnings-btn {
        border-radius:0.1rem;
        padding: 0.3rem 0.4rem;
        width:29%;
        box-sizing: border-box;
        .text {
          font-size: 35px;
          color: #fff;
          text-align: center;
        }
      }
    }
  }
}
</style>
